<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>媒体查询</title>
    <style>
      body {
        background-color: pink;
      }

      /* 
        媒体查询
        通过css来探测显示页面的设备,从而提供不同的样式

        语法:
        @media screen/print/all (条件){
          样式
        }

        条件
        max-width         最大宽度
        min-width         最小宽度

        常用取值
        < 768px           超小型设备(手机)
        768~992px         小型设备(平板)
        > 992px           大型设备(PC屏幕)
      */
      /*  @media screen and (max-width: 1200px) {
        body {
          background-color: skyblue;
        }
      }

      @media screen and (max-width: 475px) {
        body {
          background-color: palegreen;
        }
      } */
    </style>
    <!-- 媒体查询的另一种用法,注意: 和原始元素样式的顺序!!! -->
    <link rel="stylesheet" media="screen and (max-width:1200px)" href="css/39-1.css" />
    <link rel="stylesheet" media="screen and (max-width:475px)" href="css/39-2.css" />
  </head>
  <body></body>
</html>
